<template>
<view class="personal-container">
    <view class="personal-container-group">
	<u-cell-group :border="false">
		<u-cell title="头像" :isLink="false">
            <view
    	    slot="value"
    	> 
        <button open-type="chooseAvatar" @chooseavatar="chooseavatar" class="avatar-btn" >
           <u-image v-if="headPictureUrl" shape="circle" :src="headPictureUrl" width="100rpx" height="100rpx" />
          <view class="avatar-btn-text" v-else>设置头像</view>
        </button>
          
    		<!-- <u-image shape="circle" src="https://img.yzcdn.cn/vant/cat.jpeg" width="100rpx" height="100rpx" /> -->
    	</view>
        </u-cell>
		<u-cell title="姓名" @click="handleNickname()" :value="userInfonickName" :isLink="true"></u-cell>
		<u-cell  :border="false" title="手机号" :value="phone" :isLink="false"></u-cell>
	</u-cell-group>
    	
    </view>
    <!-- <view class="personal-container-group u-m-t-20">
        <u-cell-group :border="false">
		<u-cell :border="false" title="实名认证信息管理" :isLink="true">
            <view
    	    slot="value"
    	    
    	>
    	<u-tag plainFill plain  size="mini" text="未认证" type="error"></u-tag>
        </view>
        </u-cell>
		</u-cell-group>
    </view> -->
        <view class="personal-container-group u-m-t-20">
        <u-cell-group :border="false">
	       <u-cell @click="onAgreement('privacy')" title="隐私协议"  :isLink="true"></u-cell>
           <u-cell  @click="onAgreement('user')" title="用户协议"  :border="true" :isLink="true"></u-cell>
            <u-cell  @click="onLogout()" title="退出登录"  :border="false" :isLink="false"></u-cell>
		</u-cell-group>
    </view>
    <u-popup :show="showNicknameDialog" mode="center" border-radius="16" :mask-close-able="true">
      <view class="nickname-popup">
        <view class="popup-title">请输入昵称</view>
        <input
          class="nickname-input"
          type="nickname"
          v-model="nickname"
          maxlength="10"
          placeholder="请输入微信昵称"
        />
        <view class="popup-actions">
          <view class="popup-btn cancel" @click="showNicknameDialog = false">取消</view>
          <view class="popup-btn confirm" @click="confirmNickname">确定</view>
        </view>
      </view>
    </u-popup>
</view>
</template>

<script>
import { pmsUserEdit } from '@/api'
import {uploadSign} from '@/util/update'
import {mapMutations} from 'vuex'
import ls from '@/util/ls'
export default {
    data() {
        return {
            userInfo: {},
            showNicknameDialog: false,
            nickname: '',
            userInfonickName:"",
            headPictureUrl:''
        }
    },
    computed:{
        phone(){
            const mobile = String(this.userInfo.mobile || '');
            return mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
        }
    },
    onLoad(){
        this.init()
    },
    methods:{
       	...mapMutations("app",[
				'setUser','clear'
			]),
        handleNickname(){
          
            this.nickname=this.userInfo.nickName
            this.showNicknameDialog=true
        },
        onLogout(){
            uni.showModal({
                title: '提示',
                content: '确定退出登录吗？',
                success: (res) => {
                    if (res.confirm) {
                        this.logout()
                    }
                }
            })
                

            
        },
        logout(){
         this.clear()
            uni.reLaunch({
                url: "/pages/home/index"
            })
        },
        async chooseavatar(e){
            let url=e.detail.avatarUrl
            this.methodsSetUser(2,url)
        
        },
        async methodsSetUser(type,data){
            let params={
                wxUserId:this.userInfo.wxUserId.toString()
            }
            if(type==1){
                params.nickName=data
            }else{
                let url=await uploadSign(data)
                params.headPictureUrl=url
            }
           
            let res=await pmsUserEdit(params)
            if(res.code==200){
                uni.showToast({
                    title:res.msg,
                    icon:"success"
                })
              
                this.saveuser(type==1?params.nickName:params.headPictureUrl,type)
            }
        },
        onAgreement(type){
            if(type=='privacy'){
                uni.navigateTo({
                    url: `/pages/agreement/index`
                })
            }else{
                uni.navigateTo({
                    url: `pages/useragreement/index`
				})
            }
			},
        init(){
            let userInfo=ls.get("user")
            if(userInfo){
                this.userInfo=userInfo.wxUser
                this.headPictureUrl=this.userInfo.headPictureUrl
                this.userInfonickName=this.userInfo.nickName
            }
        },
        saveuser(nickname,type){
            if(type==1){
               uni.$u.toast("昵称已设置: " + nickname);
                this.userInfo.nickName=nickname
                this.userInfonickName=nickname
            }else{
                uni.$u.toast("头像已设置");
                this.userInfo.headPictureUrl=nickname
                this.headPictureUrl=nickname
            }
            let user=ls.get("user")
            user.wxUser=this.userInfo
        
            this.setUser(user)
            ls.set("user",user)
        },
       async confirmNickname() {
            // 这里可以做昵称保存逻辑
            this.methodsSetUser(1,this.nickname)
            this.showNicknameDialog = false;
           
        },
    }
}
</script>

<style lang="scss">
page{
    background: #F3F6FA;
}
.personal-container{
    padding: 20rpx;
    &-group{
        background: #fff;
        border-radius: 16rpx;
        padding: 0 30rpx;
       
    }
    .u-cell__body{
        padding:15px  0 !important
    }
}
.avatar-btn{
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    &::after{
        border: none !important;
    }
}
.avatar-btn-text{
    font-size: 28rpx;
    color: $uni-color-primary;
 
}
.nickname-popup {
  background: #fff;
  border-radius: 16rpx;
  padding: 48rpx 32rpx 32rpx 32rpx;
  width: 540rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 32rpx;
}
.nickname-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  font-size: 30rpx;
  padding: 0 24rpx;
  margin-bottom: 40rpx;
  box-sizing: border-box;
}
.popup-actions {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.popup-btn {
  flex: 1;
  text-align: center;
  height: 72rpx;
  line-height: 72rpx;
  font-size: 30rpx;
  border-radius: 8rpx;
  margin: 0 8rpx;
}
.popup-btn.cancel {
  background: #f3f3f3;
  color: #888;
}
.popup-btn.confirm {
  background: $uni-color-primary;
  color: #fff;
}
</style>